import {FC} from "react";
import {Pie} from "@ant-design/charts";

const CustChartPie: FC<any> = () => {
    const data = [
        {type: '分类一', value: 27},
        {type: '分类二', value: 25},
        {type: '分类三', value: 18},
        {type: '分类四', value: 15},
        {type: '分类五', value: 10},
        {type: '其他', value: 5}
    ];
    const config = {
        pieStyle:{
            lineWidth: 0,
            cursor: "pointer"
        },
        appendPadding: 5,
        style: {
            flex:1,
        },
        autoFit: true,
        data: data,
        color: ['#3C23BC', '#003EB3', '#065DFF', "#2D99FF", "#4DD1FF"],
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.7,
        legend: false,
        label: {
            type: 'inner',
            offset: '-50%',
            content: '{value}',
            style: {
                textAlign: 'center',
                fontSize: "1rem",
            },
        },
        statistic: {
            title: false,
            content: {
                style: {
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    color:"#fff"
                },
                formatter: function formatter(v: any) {
                    console.log(v);
                    return '';
                },
            },
        }
    };
    return <Pie {...config} />;
}
export default CustChartPie;
